Zebrar tabela usando CSS

Aprenda como Zebrar as linhas de sua tabela usando apenas o CSS.

Publicado em

Em algumas partes do projeto, onde se usa tabelas, é interessante zebrar as linhas, para que o leitor não se perca ficar elegante e até mesmo mais fácil de encontrar ou visualizar o que procura.

Zebrar uma tabela consiste em deixar linhas impares ou pares de cores diferentes, como pode ser notado no exemplo abaixo.

Zebrar tabela com CSS, ODD e even
Zebrar tabela com CSS, ODD e even

Para obter este resultado, podemos fazer de várias formas, com PHP, Javascript e apenas com CSS, sendo que PHP e JS vão ter que manipular o CSS, então a melhor forma é fazer direto no CSS for ser mais rápido, correto e organizado.

Para zebrar usamos uma pseudo-class, denominada nth-child(evento), onde evento assume vários valores, que podem ser:

ODD – Linhas ou Colunas Pares;
Even – Linhas ou colunas Ímpares;
3n+0 – A cada três linha ou coluna.

Observe o código de sua aplicação CSS abaixo.

Código 01:

table:nth-child(odd){
	background-color:#CCC;
}

table:nth-child(even){
	background-color:#EEE;
}

table:nth-child(3n+0){
	background-color:#666;
}

Há certo problema de trabalhar com este pseudo-class, mas isto apenas se dentro de sua tabela for inserido uma segunda tabela, pois desta forma o CSS não vai zebrar de forma certa, mas nada não possa ser ajustado, para resolver isto crie uma segunda formatação para a tabela interna.

Veja baixo um segundo exemplo de código, agora a aplicação CSS com o HTML.

Código 02:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>Zebrar tabela com CSS - SatellaSoft</title>
		<meta charset="utf-8" />
		<style>
			.tbZebra{ /*Acessa a tabela*/
				border: 1px solid #1E90FF; /**/
			}
			
			.tbZebra thead{ /*Acessa o cabeçalho da tabela*/
				background-color:#1E90FF; /*Adiciona um Background*/
			}
			
			.tbZebra tr th{ /*Acessa o Table Head*/
				padding:5px; /*Espaçamento de 5PX*/
				color:#FFF; /*Cor do texto para branco*/
				text-align:left; /*Alinhamento do texto para esquerda*/
			}
			
			.tbZebra tbody tr{ /*Acessa as linhas do tbody*/
				background-color:#B0C4DE; /*Adiciona um Background*/
				padding:5px; /*Espaçamento de 5PX*/
			}
			
			
			/*
				even = Ímpar, a cada linha onde for valor Ímpar
				odd  = Par, a cada linha onde o valor for Par
			*/
			.tbZebra tbody tr:nth-child(even){ /*Acessa cada filho*/
				background-color:#87CEEB; /*Altera a cor de fundo para a linha*/
			}
		</style>
	</head>
	<body>
		<table class="tbZebra">
			<thead>
				<tr>
					<th>Nome:</th>
					<th>Cidade:</th>
					<th>Edtado</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Gunner</td>
					<td>Iepê</td>
					<td>São Paulo</td>
				</tr>
				<tr>
					<td>Jaime</td>
					<td>Tangamandapio</td>
					<td>Rio de Janeiro</td>
				</tr>
				<tr>
					<td>Willian</td>
					<td>Maringa</td>
					<td>Paraná</td>
				</tr>
				<tr>
					<td>Jéssica</td>
					<td>Presidente Prudente</td>
					<td>São Paulo</td>
				</tr>
				<tr>
					<td>Gabriel</td>
					<td>Iepê</td>
					<td>São Paulo</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>	

Em caso de dúvidas, deixem nos comentários, até a próxima!

Referências

Recomenda-se a leitura da documentação feita pela W3C, CSS Pseudo-class.

Gunnar Correa
Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. Começou seus estudos na área de programação quando era criança, e atualmente, está estudando desenvolvimento de jogos. Fundador da SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.

Todos os nossos cursos em promoção
Todos os nossos cursos em promoção

Webstories

Todos os nossos cursos em promoção


Deixe um comentário
Aguarde...
Todos os nossos cursos em promoção